<!--
 * @Description: 平台侧统计卡片
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-22 14:09:49
 * @LastEditTime: 2021-10-03 11:12:56
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <div class="card">
    <ul>
      <li :style="dataListStyle">
        <svg class="svg-icon" aria-hidden="true">
          <use xlink:href="#icon-sys-cpu" />
        </svg>
        <span class="des">CPU</span>
        <count-to
          class="number"
          :style="cpu > 90 ? 'color: #ed4014;' : cpu <=90 && cpu > 75 ? 'color: #e9b424;' : 'color: #19be6b;'"
          :startVal="0"
          :endVal="cpu"
          :duration="1"
          suffix="%"
          separator
        />
      </li>
      <li :style="dataListStyle">
        <svg class="svg-icon" aria-hidden="true">
          <use xlink:href="#icon-xitongguanli" />
        </svg>
        <span class="des">RAM</span>
        <count-to
          class="number"
          :style="ram > 90 ? 'color: #ed4014;' : ram <=90 && ram > 75 ? 'color: #e9b424;' : 'color: #19be6b;'"
          :startVal="0"
          :endVal="ram"
          :duration="1"
          suffix="%"
          separator
        />
      </li>
      <li v-for="(item, index) in dataList" :key="index" :style="dataListStyle">
        <svg class="svg-icon" aria-hidden="true">
          <use :xlink:href="item.icon" />
        </svg>
        <span
          class="des"
        >{{$t(`console.card[${index}]`)}} {{item.key === 'upWidthNum' ? ' Mbps' : ''}}</span>
        <count-to
          class="number"
          :startVal="item.startVal"
          :endVal="item.endVal"
          :duration="1500"
          separator
        />
      </li>
    </ul>
  </div>
</template>

<script>
import countTo from 'vue-count-to';
import _ from 'lodash';

export default {
  name: 'ConsoleCard',
  components: {
    countTo
  },
  watch: {
    // 利用watch方法检测路由变化：
    '$route': function(to, from) {
      if (to.path === '/dashboard/console') {
        this.getServer();
      } else {
        // 清除定时器
        clearInterval(this.timerServer);
      }
    },
  },
  data () {
    return {
      timerServer: null,
      cpu: 0,
      ram: 0,
      dataList: [
        {
          key: 'cpeNum',
          icon: '#icon-shitupeizhi',
          startVal: 0,
          endVal: 0
        },
        {
          key: 'popNum',
          icon: '#icon-shujucaiji',
          startVal: 0,
          endVal: 0
        },
        {
          key: 'linkNum',
          icon: '#icon-biaojiegoupeizhi',
          startVal: 0,
          endVal: 0
        },
        {
          key: 'upWidthNum',
          icon: '#icon-shujuzhili',
          startVal: 0,
          endVal: 0
        }
      ],
      dataListStyle: {},
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.getServer();
      _this.getSum();
      _this.computedItemWidth();
    });
  },
  // 销毁
  beforeDestroy () {
    let _this = this;
    // 清除定时器
    clearInterval(_this.timerServer);
  },
  methods: {
    // 当前CPU、内存
    async getServer () {
      let _this = this;
      _this.$http.get({
        url: '/api/sys/sysinfo/servers'
      }).then(res => {
        const servers = () => {
          _this.$http.get({
            url: '/api/sys/sysinfo/performance/' + res[0].serverId,
            loading: false
          }).then(result => {
            let { cpus, memory } = result;
            // eslint-disable-next-line max-nested-callbacks
            let cpuls = cpus.map((it, index) => {
              // eslint-disable-next-line max-nested-callbacks
              return Math.round(_.chain(it.usages).map(item => item.used).mean().value() * 100);
            });
            _this.cpu = _.sum(cpuls) === 0 ? 1 : _.sum(cpuls);
            _this.ram = Math.round(memory.usedMemory / memory.totalMemory * 100);
          }).catch(err => {
            // 执行销毁
            clearInterval(_this.timerServer);
          });
        };
        servers();
        _this.timerServer = setInterval(() => {
          servers();
        }, 3000);
      }).catch(err => {
        // 执行销毁
        clearInterval(_this.timerServer);
      });
    },
    getSum () {
      let _this = this;
      _this.$http.get({
        url: '/api/sdwan/homepage/getAllNumber'
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          if (resultBody.dgs) {
            let sum = resultBody.dgs.find(item => {
              return item.dgId === _this.$store.state.user.user.info.dgId;
            });
            for (let i = 0; i < _this.dataList.length; i++) {
              if (_this.dataList[i].key === 'cpeNum' || _this.dataList[i].key === 'popNum') {
                _this.dataList[i].endVal = resultBody.homePage[_this.dataList[i].key];
              }
              if (_this.dataList[i].key === 'linkNum') {
                _this.dataList[i].endVal = sum.linkNum;
              }
              if (_this.dataList[i].key === 'upWidthNum') {
                _this.dataList[i].endVal = sum.upWidthNum;
              }
            }
          }
        }
      });
    },
    computedItemWidth () {
      let count = this.dataList;
      let width = 100 / count;

      this.dataListStyle = {
        width: `calc(${width}% - 20px)`
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.card {
  margin-bottom: 20px;
  overflow: hidden;
  background: transparent !important;

  ul {
    width: calc(100% + 15px);
    margin-left: -15px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    background: transparent !important;

    li {
      width: calc(16.666% - 15px);
      height: 125px;
      line-height: 125px;
      text-align: center;
      margin: 0 0 0 15px;
      box-sizing: border-box;
      background: #fff;
      display: flex;
      justify-content: space-between;
      padding: 0 40px;
      position: relative;
      border-radius: 3px;
      box-shadow: 0 0px 7px rgba(28, 76, 186, 0.08);
      transition: box-shadow 0.3s;

      &:hover {
        box-shadow: 0 5px 20px rgba(28, 76, 186, 0.12);
      }

      .svg-icon {
        width: 3em;
        height: 3em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);
        bottom: 0;
        left: 10%;
      }

      .number {
        color: #515a6e;
        font-size: 26px;
        line-height: 26px;
        margin: 0;
        position: absolute;
        bottom: 50%;
        right: 10%;
      }

      .des {
        color: #999999;
        font-size: 13px;
        line-height: 14px;
        height: 14px;

        position: absolute;
        bottom: 30%;
        right: 10%;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
      }
    }
  }
}

@media only screen and (max-width: $device-notebook) {
  .card {
    padding-top: 0 !important;

    ul {
      li {
        height: 100px;

        .des {
          font-size: 12px;
        }
      }
    }

    .iconfont {
      left: 15px !important;
    }

    .number,
    .des {
      right: 15px !important;
    }
  }
}

@media only screen and (max-width: $device-ipad) {
  .card {
    ul {
      width: calc(100% + 15px);
      margin-left: -15px;
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;

      li {
        width: calc(33.333% - 15px);
        height: 120px;
        line-height: 120px;
        margin-bottom: 15px;
      }
    }
  }
}

@media only screen and (max-width: $device-phone) {
  .card {
    ul {
      width: calc(100% + 15px);
      margin-left: -15px;
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;

      li {
        width: 100%;
        height: 100px;
        line-height: 100px;
        margin-bottom: 10px;
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style>
